<template>
  <ex-dialog width="700px" class="ex-diolog" :title="title" :visible="visible" :close-on-click-modal="false"
    @closeDialog="handleClose">
    <div class="main" v-loading="loading"> 
      <p style="margin: 0 10px 14px">订单编号：{{ruleForm.orderNo}}</p>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="labelWidth" class="demo-ruleForm">
        <el-form-item label="退款方式：" prop="refundType">
          <el-radio-group v-model="ruleForm.refundType">
            <el-radio v-for="(item) in refundTypeList" @change="(value) => changeRefundType(value,item.value)" :label="item.id" :key="item.id">{{item.value}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="txtList">
          <div class="list">
            <p class="lab">实付金额：</p>
            <p class="txt">￥{{orderInfo.payMoney}}</p>
          </div>
          <div class="list" v-if="orderInfo.platformAssetType">
            <p class="lab">积分支付：</p>
            <p class="txt">{{orderInfo.useAmount}}{{orderInfo.platformAssetType == 4 ? 'CoCo' : '椰分'}}</p>
          </div>
          <div class="list">
            <p class="lab">退款手续费：</p>
            <p class="txt">￥{{orderInfo.refundCommission}}</p>
          </div>
          <div class="list" v-if="orderInfo.platformAssetType">
            <p class="lab">积分手续费：</p>
            <p class="txt">{{orderInfo.integralRefundAmount}}{{orderInfo.platformAssetType == 4 ? 'CoCo' : '椰分'}}</p>
          </div>
        </div>
        <el-form-item label="退款金额：" prop="refundMoney" v-if="ruleForm.refundType != 3">
          <el-input v-model="ruleForm.refundMoney" placeholder="请输入退款金额" :style="{width: inputWidth}"></el-input>
        </el-form-item>
        <el-form-item label="退还积分：" prop="refundIntegral" v-if="ruleForm.refundType != 3 && orderInfo.platformAssetType">
          <el-input v-model="ruleForm.refundIntegral" placeholder="请输入退还积分" :style="{width: inputWidth}"></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="desc">
          <el-input v-model="ruleForm.desc" placeholder="请输入备注" :style="{width: inputWidth}"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="button_box">
      <el-button type="primary" :loading="AgreeLoading" @click="submitForm('ruleForm')">确认</el-button>
      <el-button @click="handleClose">取消</el-button>
    </div>
    <el-dialog width="500px" title="确认退款" :visible.sync="innerVisible" append-to-body>
      <p>是否将支付款项 {{ruleForm.refundMoney}} 原路退回至用户 {{phone}} 的微信账户</p>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="AgreeLoading" @click="submitRefund">确认退回</el-button>
        <el-button @click="innerVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </ex-dialog>
</template>
<script>
  import Loading from "@/components/Loading/index";
  // api
  import {
    activityOrderRefund,
    orderConfirmRefund,
    refundInfo,
    orderRefund,
  } from "@/api/consumeMiningManagement/clockingActivityOrder";

  export default {
    components: {
      Loading,
    },
    props: {
      visible: Boolean,
      id: String,
    },
    data() {
      var checkRefundMoney = (rule, value, callback) => { 
        let regNumber = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
        if (regNumber.test(value) == false) {
          return callback(new Error('请输入大于0且最多保留两位小数的数值'));
        }else if(value > this.orderInfo.payMoney){
          return callback(new Error(`最大退款金额不能大于${this.orderInfo.payMoney}元`));
        } 
        else {
          return callback()
        }
      };
      var checkRefundIntegral = (rule, value, callback) => { 
        let regNumber = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
        if (regNumber.test(value) == false) {
          return callback(new Error('请输入大于0且最多保留两位小数的数值'));
        } else if(value > this.orderInfo.useAmount){
          return callback(new Error(`最大退款金额不能大于${this.orderInfo.useAmount}`));
        }  else {
          return callback()
        }
      };
      return {
        labelWidth: '100px',
        inputWidth: '300px',
        title: '退款',
        loading: false,
        disabled: false,
        AgreeLoading: false, //按钮loading
        innerVisible: false,
        phone:'',//退款手机号
        orderInfo: {},
        refundTypeList: [
          {id: 1,value: '原路退回'},
          {id: 2,value: '线下退款'},
          {id: 3,value: '拒绝退款'},
        ],
        ruleForm: {
          orderNo: '', //订单编号
          refundType: 1,
          refundMoney: '', //退款金额
          refundIntegral: '',//退还积分
          desc: '原路退回',//备注
        },
        rules: {
          refundType: [{
            required: true,
            message: "请选择退款方式",
            trigger: ['change'],
          }],
          refundMoney: [{
            required: true,
            validator: checkRefundMoney,
            trigger: ['change', 'bulr'],
          }],
          refundIntegral: [{
            required: true,
            validator: checkRefundIntegral,
            trigger: ['change', 'bulr'],
          }],
        },
      };
    },
    computed: {},
    created() {
      this.getInfo()
    },
    mounted() {

    },
    methods: {
      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
      },
      getInfo() { //获取信息
        refundInfo(this.id).then((res) => {
            var data = res.result
					 this.ruleForm.orderNo = res.result.orderNo
           this.orderInfo = data
           this.ruleForm.refundMoney =  this.$cal.accSub(data.payMoney,data.refundCommission) 
           if(this.ruleForm.refundMoney < 0){
             this.ruleForm.refundMoney = 0
           }
           if(data.platformAssetType){
             this.ruleForm.refundIntegral = this.$cal.accSub(data.useAmount,data.integralRefundAmount)
           }
				})
      },
      //获取退款方式
      changeRefundType(e,value){
        this.ruleForm.desc = value
      },
      submitForm(formName) {
        //创建确定
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.AgreeLoading = true
            var data = {
              ...this.ruleForm,
            };
            orderRefund(data).then((res) => {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              setTimeout(() => {
                this.$emit('success')
                this.handleClose()
                // setTimeout(() => {
                //   this.AgreeLoading = false
                // }, 2000)
                this.AgreeLoading = false
              }, 3000);
            })
            .catch(() => {
              this.AgreeLoading = false;
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      submitRefund() { //确认退回
        this.AgreeLoading = true
        var data = {
          ...this.ruleForm,
        };
        orderRefund(data).then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          setTimeout(() => {
            this.$emit('success')
            this.handleClose()
            // setTimeout(() => {
            //   this.AgreeLoading = false
            // }, 2000)
            this.AgreeLoading = false
          }, 1000);
        })
        .catch(() => {
          this.AgreeLoading = false;
        });
      },
    },
  };

</script>
<style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }

    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }

  .button_box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
  }
  .txtList{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    // margin-top: 10px;
    margin-bottom: 18px;
    .list{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 25%;
    }
  }
</style>
